<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta
            name="keywords"
            content="哔哩哔哩, 哔哩哔哩漫画, bilibili 漫画官方网站, 漫画,动画, 原创, 正版, 海贼王, 五等分的新娘, 约定的梦幻岛, 辉夜大小姐想让我告白 ~天才们的恋爱头脑战~, 关于我转生变成史莱姆这档事, 我的英雄学园, 修真聊天群, 乔乔的奇妙冒险, 斗罗大陆, 一拳超人, 灵能百分百, 铳梦"
        />
        <meta
            name="description"
            content="哔哩哔哩正版漫画阅读平台, 海量官方漫画连载在线观看, 二次元动漫迷的追漫神器, 热门漫画: 海贼王, 五等分的新娘, 约定的梦幻岛, 辉夜大小姐想让我告白 ~天才们的恋爱头脑战~, 关于我转生变成史莱姆这档事, 我的英雄学园, 修真聊天群, 乔乔的奇妙冒险, 斗罗大陆, 我家大师兄脑子有坑, 一拳超人, 灵能百分百, 铳梦等"
        />
        <link rel="icon" href="./favicon.ico" />
        <title>哔哩哔哩漫画 - bilibili 正版漫画平台</title>
        <link rel="stylesheet" href="./favicon.ico" />
        <link rel="stylesheet" href="./css/about.css" />
    </head>
    <body>
        <!-- 1. 头部固定 -->
        <header>
            <div class="top">
                <div class="left">
                    <a href="javascript:;">
                        <img src="./images/logo.png" alt="" />
                    </a>
                </div>
                <div class="middle">
                    <ul>
                        <li><a href="javascript:;">推荐</a></li>
                        <li><a href="javascript:;">排行</a></li>
                        <li><a href="javascript:;" class="current">分类</a></li>
                    </ul>
                </div>
                <div class="right">
                    <button>下载哔哩哔哩漫画</button>
                </div>
            </div>
        </header>

        <div class="list">
            <div class="tab">
                <ul>
                    <li><a href="javascript:;" class="current">全部</a></li>
                    <li><a href="javascript:;">热血</a></li>
                    <li><a href="javascript:;">古风</a></li>
                    <li><a href="javascript:;">玄幻</a></li>
                    <li><a href="javascript:;">奇幻</a></li>
                    <li><a href="javascript:;">悬疑</a></li>
                    <li><a href="javascript:;">都市</a></li>
                    <li><a href="javascript:;">历史</a></li>
                    <li><a href="javascript:;">武侠仙侠</a></li>
                    <li><a href="javascript:;">游戏竞技</a></li>
                    <li><a href="javascript:;">悬疑灵异</a></li>
                    <li><a href="javascript:;">架空</a></li>
                    <li><a href="javascript:;">青春</a></li>
                    <li><a href="javascript:;">西幻</a></li>
                    <li><a href="javascript:;">现代</a></li>
                    <li><a href="javascript:;">正能量</a></li>
                    <li><a href="javascript:;">科幻</a></li>
                </ul>
            </div>
        </div>

        <div class="nav-dis none">
            <ul>
                <li class="red">全部</li>
                <li>大陆</li>
                <li>日本</li>
                <li>韩国</li>
                <li>其他</li>
            </ul>
            <ul>
                <li class="red">全部</li>
                <li>连载</li>
                <li>完结</li>
            </ul>
            <ul>
                <li class="red">全部</li>
                <li>免费</li>
                <li>付费</li>
                <li>等就免费</li>
            </ul>
        </div>
        <div class="nav-show">
            <ul>
                <li class="red">人气推荐</li>
                <li>更新时间</li>
                <li>追漫人数</li>
                <li>上架时间</li>
            </ul>
            <span class="btn-span">筛选</span>
        </div>
        <!-- 视频区域布局 -->
        <section class="video_content">
            <!-- 一份视频, 共计有5个菜单, 应该有5份视频的div -->
            <div class="video_list">
                <a href="javascript:;">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="javascript:;">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="javascript:;">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="javascript:;">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
                <a href="#">
                    <div class="pic">
                        <img src="./images/1.jpg" alt="" />
                    </div>
                    <div class="txt ellipsis-2">鬼灭之刃</div>
                    <div class="text">更新至4444话</div>
                </a>
            </div>
        </section>
        <!-- 3. 按钮固定 -->
    </body>
</html>
